<template>
  <div>
    <div class="clolr">
      <span>交易统计</span>
      <el-button type="primary" class="bta" @click="shuaxin2"> 刷新 </el-button>
    </div>
    <div class="bk clear" style="width: 90%;">
      <div class="clor clear">
        <span>交易数据</span>
        <el-button size="mini" class="bt1" @click="daochu"> 导出 </el-button>
        <!-- <div class="bta">
          <el-button size="mini">昨天</el-button>
          <el-button size="mini">最近7天</el-button>
          <el-button size="mini">最近30天</el-button>
        </div> -->
      </div>
      <div class="div1">
        <span>数据概括</span>
      </div>
      <template>
        <el-table :data="tableData" border id="mainx" class="table1" style="width: 100%">
          <el-table-column prop="llrs" label="浏览人数">
          </el-table-column>
          <el-table-column prop="xdrs" label="下单人数">
          </el-table-column>
          <el-table-column prop="dds" label="订单数">
          </el-table-column>
          <el-table-column prop="xdjs" label="下单件数">
          </el-table-column>
          <el-table-column prop="yxdd" label="有效订单数">
          </el-table-column>
          <el-table-column prop="xdje" label="下单金额">
          </el-table-column>
        </el-table>
      </template>
      <template>
        <el-table :data="tableData1" border id="mainx" class="table1" style="width: 100% ">
          <el-table-column prop="tkje" label="退款金额">
          </el-table-column>
          <el-table-column prop="fkrs" label="付款人数">
          </el-table-column>
          <el-table-column prop="fkdds" label="付款订单数">
          </el-table-column>
          <el-table-column prop="fkjs" label="付款件数">
          </el-table-column>
          <el-table-column prop="fkje" label="付款金额">
          </el-table-column>
          <el-table-column prop="kdj" label="客单价">
          </el-table-column>
        </el-table>
      </template>
      <div id="maina" style="width: 100%;height:400px">

      </div>
    </div>

    <div class="bk clear" style="width: 90%;">
      <div class="clor clear">
        <span>交易数据</span>
        <el-button size="mini" class="bt1" @click="daochu2"> 导出 </el-button>
        <!-- <div class="bta">
          <el-button size="mini">昨天</el-button>
          <el-button size="mini">最近7天</el-button>
          <el-button size="mini">最近30天</el-button>
        </div> -->
      </div>
      <p class="span1">付款订单数（单）</p>
      <div id="mainb" style="width: 100%;height:500px">

      </div>
      <p class="span2">订单金额（元）</p>
    </div>

    <div class="bk clear" style="width: 90%;">
      <div class="clor clear">
        <span>新老客户交易构成</span>
        <el-button size="mini" class="bt1" @click="daochu3"> 导出 </el-button>
        <!-- <div class="bta">
          <el-button size="mini">上月</el-button>
          <el-button size="mini">本月</el-button>
        </div> -->
      </div>
      <div id="mainc" class="mainz" style="width: 35%;height:500px">

      </div>
      <div id="maind" class="mainz" style="width: 55%;height:300px">
        <template>
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="khlx" label="客户类型">
            </el-table-column>
            <el-table-column prop="fkje" label="付款金额">
            </el-table-column>
            <el-table-column prop="jqyy" label="较前一月">
            </el-table-column>
            <el-table-column prop="fkrs" label="付款人数">
            </el-table-column>
            <el-table-column prop="jqyy2" label="较前一月">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>

</template>
<script>
// 引入
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import { FunnelChart, BarChart, PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

echarts.use([
  LabelLayout,
  PieChart,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  FunnelChart,
  CanvasRenderer,
  GridComponent,
  BarChart
]);

// 图/表
export default {
  data() {
    return {
      totalData: [],
      totalData1: [],
      totalData2: [],
    };
  },

  mounted: function () {
    this.getUserList();
    this.getUserList1();
    this.getUserList2();
    var chartDomc = document.getElementById('mainc');
    var chartDom = document.getElementById('maina');
    var chartDomb = document.getElementById('mainb');
    var myChart = echarts.init(chartDom);
    var myChartb = echarts.init(chartDomb);
    var myChartc = echarts.init(chartDomc);
    var option;
    var optionb;
    var optionc;
    var myChart = echarts.init(document.getElementById('maina'));
    var optionb = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['0-50', '50-100', '100-200', '200-500', '500-1000', '1000-2000', '2000-5000', '5000以上'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [32, 42, 40, 68, 32, 22, 15, 6]
        }
      ]
    };
    var option = {
      title: {
        text: '数据漏斗'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
      },
      toolbox: {
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      series: [
        {
          name: '数据漏斗',
          type: 'funnel',
          left: '45%',
          top: 60,
          bottom: 60,
          width: '30%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside'
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: [
            { value: 5.34, name: '付款' },
            { value: 9.34, name: '下单' },
            { value: 100, name: '浏览' }
          ]
        }
      ]
    };
    var optionc = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        left: '50px',
        top: '30px'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          left: '60px',
          radius: '100%',
          data: [
            { value: 27.8, name: '老客户' },
            { value: 72.8, name: '新客户' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
    optionb && myChartb.setOption(optionb)
    optionc && myChartc.setOption(optionc);
  },
  methods: {
    // 刷新
    shuaxin2() {
      this.$message({
        message: "刷新成功",
        type: "success",
      });
    },
    // 获取数据
    getUserList() {
      // console.log("获取数据");
      this.$axios({
        url: "/goodst/jysja",
      }).then((res) => {
        this.totalData = res.data.data;
        console.log(res.data.data);
      });
    },
    // 获取数据
    getUserList1() {
      // console.log("获取数据");
      this.$axios({
        url: "/goodst/jysjb",
      }).then((res) => {
        this.totalData1 = res.data.data;
        console.log(res.data.data);
      });
    },
    // 获取数据
    getUserList2() {
      // console.log("获取数据");
      this.$axios({
        url: "/goodst/jysjc",
      }).then((res) => {
        this.totalData2 = res.data.data;
        console.log(res.data.data);
      });
    },
    // 导出
    daochu() {
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#mainx'), xlsxParam)

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 导出
    daochu2() {
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#mainb'), xlsxParam)

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 导出
    daochu3() {
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('.mainz'), xlsxParam)

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
  },

  computed: {
    tableData1() {
      return this.totalData1.slice(
      );
    },
    tableData() {
      return this.totalData.slice(
      );
    },
    tableData2() {
      return this.totalData2.slice(
      );
    },
  },

}

</script>


<style scoped>
#maind {
  margin-top: 150px;
  margin-right: 30px;
  float: right;
}
#mainc {
  float: left;
}
.span2 {
  font-size: 15px;
  margin-left: 90%;
  color: rgb(175, 163, 163);
}
.span1 {
  font-size: 15px;
  margin-top: 25px;
  margin-bottom: -20px;
  color: rgb(175, 163, 163);
}
.clor {
  background-color: #f2f2f2;
  height: 40px;
  padding: 10px 40px;
}
.bta {
  float: right;
}
.btc {
  float: right;
}
.table1 {
  margin-left: 5px;
}
.div1 {
  width: 100%;
  height: 70px;
}
.div1 > span {
  line-height: 70px;
}
.bk {
  border: 1px solid #e4e4e4;
  margin: 20px 25px 20px 25px;
  padding: 0 20px 10px 0;
}
.clear::after {
  content: "";
  display: block;
  clear: both;
}
.bt1 {
  float: right;
}
.clolr {
  background-color: #f2f2f2;
  height: 40px;
  padding: 10px 15px;
}
.clolr > span {
  line-height: 40px;
}
</style>